<template>
  <div class="import-container">
    <el-card>
      <!-- Emelent-Alert 警告,组件 -->
      <h2>{{ title }}导入</h2>
      <el-alert
        title="每次导入仅可以添加1000员工,姓名,手机.入职事件,聘用形式为必填项"
        type="warning"
        show-icon
      >
      </el-alert>
      <!-- 使用子组件 -->
      <!-- 因为在components/UploadExcel/index.vue这个上传组件里面, -->
      <!-- vue的,导入组件提供的两个回调函数, -->
      <!-- beforeUpload 你可以在上传之前做一些自己的特殊判断，如判断文件的大小是否大于 1 兆？若大于 1 兆则停止解析并提示错误信息。 -->
      <!-- onSuccess 解析成功时候会触发的回调函数 -->
      <!-- 因为是组件定义的两个方法,所以在views/import/index.vue导入了这个组件的页面里面,使用这两个方法的时候 -->
      <!-- 方法名字就不能随便写哦,必须要交组件定义的这两个名字 -->
      <UploadExcel :on-success="successHandler"></UploadExcel>
    </el-card>
  </div>
</template>

<script>
// 7月19号------------------月19号------------------
// 导入了子组件,使用了vue官网的,导入文件功能
import UploadExcel from '../../components/UploadExcel/index.vue'
// 这是,导入文件的接口
import { importEmployees } from '../../api/employees.js'
// 导入工具函数(处理日期的工具函数)
import { formatExcelDate } from '../../utils/index.js'
export default {
  name: 'import',
  components: {
    UploadExcel
  },
  data () {
    return {}
  },
  methods: {
    async successHandler (data) {
      //  导入不仅仅是浏览器上要去读取文件,还需要丢到服务器里面去,
      //  所以是需要调接口的,根据接口要的格式,把读取出来的文件,处理后,没有问题了
      //  在丢到服务器里面
      //  需要传入一个data(然后可以读取出这个文件)
      //  打印出来有两个东西,一个是header表头,一个是results结果,然后再结果里面有和表格对应的一些数据
      //  correctionTime:43719 formOfEmployment: 1 mobile: 13041119799 username: "凌凌漆1" workNumber: 20189 timeOfEntry:43719
      //  注意导入的表格也和新增到服务器的表格数据要一致
      //  但是里面的时间却是correctionTime:43719,这是模块本身的问题,在它读取excel文件的时候,(其实excel里面的日期是没有错的)
      //  但是在使用这个组件的时候,读取日期出来后,会自动的转成类似于43719这样的格式,所以需要转时间
      //  导入excel时日期格式转换问题  就是将类似于43719这样的格式转成2016-9-5
      //  使用这个网站里面的方法 https://blog.csdn.net/weixin_44594300/article/details/106354938
      //   console.log('data', data)
      // 基于现有数组,去生成一个新数组
      // data.results点出这个里面的数据去循环生成一个新的数组,使用map方法
      const newArr = data.results.map(v => {
        //  return,要返回的每一项(将里面有类似于这样43719日期的每一项,进行转换)
        // '/'就是加一个分割符,不写也可以,一般写上
        v.correctionTime = formatExcelDate(v.correctionTime, '/')
        v.timeOfEntry = formatExcelDate(v.timeOfEntry, '/')
        // 修改原对象,把v解构出来,丢到一个新对象里面并且返回(这样就是返回一下新对象,跟原对象的引用地址不一样)
        // 这样做的效果就是,避免因为引用地址一样,出现其他的问题
        return {
          ...v
        }
      })
      //   console.log('newArr', newArr) // 打印转换出来的结构
      // 本地导入成功
      // 把处理好的newArr数组提交到服务器
      await importEmployees(newArr)
      this.$message.success('文件导入成功')
      this.$router.push({ path: '/employees' })
      // 1页面需要改
      // 2导入的数据格式和调用的接口也要改
      // 如何在导入数据的时候把部门也导入了???(那就需要找到新增时候的form表单里面对应部门的字段,departmentName)
      // 同时在需要导入的这个excel文件里面也添加这个字段,(必须是导入文件里面的字段要和服务器提交的字段一直)
    }
  },
  computed: {
    // 分析,如何实现,可以上传多种不同的类型的数据???url中携带数据比如`type`(从不同页面访问过来,就显示对应的页面名称)
    // employees/index.vue里面,this.$router.push({ path: '/import', query: { type: 'employee' } })
    // 同时也可以根据不用的url的值取判断上传不同类型的数据(目前这里的逻辑,只是改了一个title)
    title () {
      // 因为可能有多个页面需要点击导入,所以循环一下
      switch (this.$route.query.type) {
        case 'employee':
          return '员工'
        case 'departments':
          return '组织架构'
          break
        default:
          return '情况不对哇凌凌漆'
          break
      }
    }
  }
}
</script>

<style lang="scss">
.import-container {
  padding: 20px;
  .el-card {
    text-align: center;
  }
  .el-alert {
    margin-bottom: 20px;
  }
}
</style>
